<template>
  <div>
    <Nav :paths="paths"></Nav>
    <br />
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-input v-model="searchIpt" placeholder="请输入内容" :style="{width:'400px'}" class="input-with-select">
          <el-button @click="search" slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
      <div class="text item">
        <el-table
          :data="tableData"
          v-loading="isLoading"
          stripe
          style="width: 100%">
          <el-table-column
            type="index"
            width="50">
          </el-table-column>
          <el-table-column
            prop="goods_name"
            label="商品名称"
            width="500">
          </el-table-column>
          <el-table-column
            prop="goods_price"
            label="商品价格"
            width="100">
          </el-table-column>
          <el-table-column
            prop="goods_weight"
            label="商品重量"
            width="100">
          </el-table-column>
          <el-table-column
            prop="add_time"
            label="创建时间"
            width="120">
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button @click="modify(scope.row)" type="text" size="small">修改</el-button>
              <el-button @click="deleteC(scope.row.goods_id)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          @current-change="changeCurrent"
          layout="prev, pager, next"
          :current-page="currentNum"
          :total="1000">
        </el-pagination>
      </div>
    </el-card>
    <ModifyGoods @update="render1()" ref="ModifyGoods" />
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import Nav, { paths } from '@/components/Nav'
import { CHANGE_CURRENT, GET_ALL_GOODS, SEARCH_GOOD_BY_ID } from '@/store/goods/const'
import { good } from '@/store/goods/interface'
import { deleteGood } from '@/api/goods'
import ModifyGoods from '@/components/goods/goods_modify.vue'

@Component({
  components: { ModifyGoods, Nav }
})
export default class Goods extends Vue {
  constructor (...arg:any) {
    super(arg)
    this.render1()
  }

  private isLoading=true

  public searchIpt=''
  search () {
    if (this.searchIpt) {
      this.$store.dispatch(SEARCH_GOOD_BY_ID, +this.searchIpt)
    } else {
      this.render1()
    }
  }

  public get tableData () {
    return this.$store.state.good.goods.goods
  }

  @Watch('$store.state.good.goods.goods')
  _q1 () {
    this.isLoading = false
  }

  public get currentNum () {
    return this.$store.state.good.limit.pagenum
  }

  modify (e:good) {
    const { ModifyGoods } = this.$refs as any
    ModifyGoods.form = { ...e }
    ModifyGoods.isOpen = true
  }

  async deleteC (id:number) {
    const { meta: { status, msg } } = await deleteGood(id)
    this.open(msg, status === 200 ? 'success' : 'error')
    this.render1()
  }

  render1 () {
    this.isLoading = true
    this.$store.dispatch(GET_ALL_GOODS)
  }

  open (
    smg = '登陆成功',
    type: 'success' | 'warning' | 'info' | 'error' = 'success'
  ) {
    this.$message({
      message: smg,
      type: type
    })
  }

  // 修改分页
  changeCurrent (e:number) {
    this.$store.commit(CHANGE_CURRENT, e)
    this.render1()
  }

  // 面包屑
  public paths: paths = [
    {
      path: '/index',
      pName: '首页'
    },
    {
      path: '/index/goods',
      pName: '商品管理'
    },
    {
      path: '/index/goods',
      pName: '商品列表'
    }
  ]
}
</script>

<style lang="less" scoped>
  body{
    margin: 0;
  }
</style>
